<template>
  <view class="container">
    <!-- 顶部状态栏 -->
    <view class="status-bar"></view>
    
    <!-- 页面内容 -->
    <view class="page-content">
      <!-- 顶部标题区域 -->
      <view class="header-section">
        <view class="header-content">
          <text class="welcome-text">您好，{{ userInfo.name || '用户' }}</text>
          <text class="title">智能电表监控</text>
          <view class="header-actions">
            <view class="refresh-area" @tap="refreshData">
              <text class="refresh-text">{{ lastUpdateTime }}</text>
              <view class="refresh-icon">
                <text class="icon">🔄</text>
              </view>
            </view>
          </view>
        </view>
      </view>
	  
	  <!-- 账户状态提示 -->
	  <view class="account-status-bar" :class="accountStatusClass" v-if="showAccountStatus" @tap="handleAccountStatusClick">
	    <view class="status-content">
	      <text class="status-icon">{{ accountStatusIcon }}</text>
	      <text class="status-text">{{ accountStatusText }}</text>
	    </view>
	    <text class="status-action">{{ accountStatusAction }}</text>
	    <text class="status-close" v-if="accountStatus !== 'expired'" @tap.stop="dismissAccountStatus">×</text>
	  </view>
      
      <!-- 阈值设置按钮 -->
      <view class="threshold-button-area" @tap="openThresholdSettings">
        <view class="threshold-button">
          <text class="threshold-icon">⚡</text>
          <text class="threshold-text">电量阈值设置</text>
          <text class="threshold-arrow">›</text>
        </view>
      </view>
      
      <!-- 阈值状态卡片 -->
      <view class="threshold-status-card">
        <view class="card-header">
          <text class="card-title">阈值状态</text>
          <view class="status-indicator" :class="overallThresholdStatus">
            <text class="status-dot"></text>
            <text class="status-text">{{ overallThresholdText }}</text>
          </view>
        </view>
        
        <view class="threshold-status-content">
          <!-- 日用电阈值状态 -->
          <view class="status-item" v-if="dailyThreshold.enabled">
            <view class="status-info">
              <text class="status-label">日用电</text>
              <text class="status-value">{{ todayUsage }}/{{ dailyThreshold.value }} kWh</text>
            </view>
            <view class="status-progress">
              <view class="progress-bar">
                <view 
                  class="progress-fill" 
                  :class="getThresholdProgressClass('daily')"
                  :style="{width: getThresholdProgress('daily') + '%'}"
                ></view>
              </view>
              <text class="progress-text">{{ getThresholdProgress('daily') }}%</text>
            </view>
            <view class="status-tag" :class="getThresholdStatusClass('daily')">
              {{ getThresholdStatusText('daily') }}
            </view>
          </view>
          
          <!-- 月用电阈值状态 -->
          <view class="status-item" v-if="monthlyThreshold.enabled">
            <view class="status-info">
              <text class="status-label">月用电</text>
              <text class="status-value">{{ currentMonthUsage }}/{{ monthlyThreshold.value }} kWh</text>
            </view>
            <view class="status-progress">
              <view class="progress-bar">
                <view 
                  class="progress-fill" 
                  :class="getThresholdProgressClass('monthly')"
                  :style="{width: getThresholdProgress('monthly') + '%'}"
                ></view>
              </view>
              <text class="progress-text">{{ getThresholdProgress('monthly') }}%</text>
            </view>
            <view class="status-tag" :class="getThresholdStatusClass('monthly')">
              {{ getThresholdStatusText('monthly') }}
            </view>
          </view>
          
          <!-- 无阈值设置提示 -->
          <view class="no-thresholds" v-if="!dailyThreshold.enabled && !monthlyThreshold.enabled">
            <text class="no-thresholds-text">未设置任何电量阈值</text>
            <text class="no-thresholds-hint">点击上方按钮进行设置</text>
          </view>
        </view>
      </view>
      
      <!-- 核心数据卡片 -->
      <view class="data-cards">
        <!-- 当月用电卡片 -->
        <view class="data-card meter-card">
          <view class="card-header">
            <text class="card-title">当月用电</text>
            <view class="card-icon">
              <text class="icon">📊</text>
            </view>
          </view>
          <view class="card-content">
            <view class="usage-section">
              <text class="usage-value">{{ currentMonthUsage }}</text>
              <text class="usage-unit">kWh</text>
            </view>
            <view class="cost-section">
              <text class="cost-value">¥{{ currentMonthCost }}</text>
              <text class="cost-label">费用</text>
            </view>
          </view>
          <view class="card-footer">
            <text class="update-time">截至: {{ currentDate }}</text>
          </view>
        </view>
        
        <!-- 功率卡片 -->
        <view class="data-card power-card">
          <view class="card-header">
            <text class="card-title">当前功率</text>
            <view class="card-icon">
              <text class="icon">⚡</text>
            </view>
          </view>
          <view class="card-content">
            <text class="power-value">{{ currentPower }}</text>
            <text class="power-unit">kW</text>
          </view>
          <view class="power-indicator">
            <view class="indicator-bar">
              <view class="indicator-fill" :style="{width: powerPercentage + '%'}"></view>
            </view>
            <view class="indicator-labels">
              <text class="indicator-text">负载: {{ powerPercentage }}%</text>
              <text class="indicator-max">最大: 5.0kW</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 阈值提醒卡片 -->
      <view class="threshold-card" v-if="hasThresholdAlerts">
        <view class="card-header">
          <text class="card-title">阈值提醒</text>
          <view class="alert-badge" v-if="activeAlertsCount > 0">
            <text class="badge-text">{{ activeAlertsCount }}</text>
          </view>
        </view>
        
        <view class="threshold-alerts">
          <view 
            v-for="alert in activeAlerts" 
            :key="alert.type" 
            class="alert-item"
            :class="getAlertClass(alert.level)"
          >
            <view class="alert-icon">
              <text class="icon">{{ alert.icon }}</text>
            </view>
            <view class="alert-content">
              <text class="alert-title">{{ alert.title }}</text>
              <text class="alert-desc">{{ alert.description }}</text>
            </view>
            <view class="alert-actions">
              <text class="alert-action" @tap="handleAlertAction(alert)">查看</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 用电统计卡片 -->
      <view class="stats-card">
        <view class="card-header">
          <text class="card-title">用电统计</text>
          <view class="time-filter">
            <text class="filter-option" :class="{active: selectedPeriod === 'day'}" @tap="selectPeriod('day')">日</text>
            <text class="filter-option" :class="{active: selectedPeriod === 'week'}" @tap="selectPeriod('week')">周</text>
            <text class="filter-option" :class="{active: selectedPeriod === 'month'}" @tap="selectPeriod('month')">月</text>
          </view>
        </view>
        
        <view class="stats-content">
          <view class="stat-item">
            <text class="stat-label">用电量</text>
            <text class="stat-value">{{ todayUsage }}</text>
            <text class="stat-unit">kWh</text>
            <view class="stat-change" :class="todayChange >= 0 ? 'positive' : 'negative'">
              <text class="change-icon">{{ todayChange >= 0 ? '↗' : '↘' }}</text>
              <text class="change-value">{{ Math.abs(todayChange) }}%</text>
            </view>
          </view>
          
          <view class="stat-item">
            <text class="stat-label">平均功率</text>
            <text class="stat-value">{{ averagePower }}</text>
            <text class="stat-unit">kW</text>
            <view class="stat-change" :class="weekChange >= 0 ? 'positive' : 'negative'">
              <text class="change-icon">{{ weekChange >= 0 ? '↗' : '↘' }}</text>
              <text class="change-value">{{ Math.abs(weekChange) }}%</text>
            </view>
          </view>
          
          <view class="stat-item">
            <text class="stat-label">费用估算</text>
            <text class="stat-value">{{ (parseFloat(todayUsage) * 0.8).toFixed(2) }}</text>
            <text class="stat-unit">元</text>
            <view class="stat-change" :class="monthChange >= 0 ? 'positive' : 'negative'">
              <text class="change-icon">{{ monthChange >= 0 ? '↗' : '↘' }}</text>
              <text class="change-value">{{ Math.abs(monthChange) }}%</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 用电趋势图表 -->
      <view class="chart-card">
        <view class="card-header">
          <text class="card-title">用电趋势</text>
          <view class="chart-actions">
            <text class="chart-action" @tap="exportChartData">导出</text>
          </view>
        </view>
        
        <view class="chart-container">
          <qiun-data-charts 
            type="line"
            :chartData="chartData"
            :opts="chartOpts"
            :canvas2d="true"
            canvasId="trendChart"
          />
        </view>
        
        <view class="chart-summary">
          <view class="summary-item">
            <text class="summary-label">平均用电</text>
            <text class="summary-value">{{ averageUsage }} kWh</text>
          </view>
          <view class="summary-item">
            <text class="summary-label">峰值用电</text>
            <text class="summary-value">{{ peakUsage }} kWh</text>
          </view>
          <view class="summary-item">
            <text class="summary-label">总用电量</text>
            <text class="summary-value">{{ totalUsage }} kWh</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 续费弹窗 -->
    <view class="renewal-modal" v-if="showRenewalModal">
      <view class="modal-mask" @tap="closeRenewalModal"></view>
      <view class="modal-content">
        <view class="modal-header">
          <text class="modal-title">账户续费</text>
          <text class="modal-close" @tap="closeRenewalModal">×</text>
        </view>
        
        <view class="modal-body">
          <text class="modal-desc">请选择续费时长以继续使用系统</text>
          
          <view class="plan-options">
            <view 
              v-for="plan in renewalPlans" 
              :key="plan.months"
              class="plan-option"
              :class="{ 'plan-option-selected': selectedPlan === plan.months }"
              @tap="selectPlan(plan.months)"
            >
              <view class="plan-duration">
                <text class="plan-months">{{ plan.months }}</text>
                <text class="plan-unit">个月</text>
              </view>
              <view class="plan-price">
                <text class="price-symbol">¥</text>
                <text class="price-amount">{{ plan.price }}</text>
              </view>
              <view class="plan-savings" v-if="plan.savings">
                <text class="savings-text">节省{{ plan.savings }}%</text>
              </view>
            </view>
          </view>
          
          <view class="payment-summary">
            <view class="summary-item">
              <text class="summary-label">选择时长</text>
              <text class="summary-value">{{ selectedPlanMonths }}个月</text>
            </view>
            <view class="summary-item">
              <text class="summary-label">应付金额</text>
              <text class="summary-value price">¥{{ selectedPlanPrice }}</text>
            </view>
          </view>
        </view>
        
        <view class="modal-actions">
          <button class="action-btn cancel" @tap="closeRenewalModal">稍后再说</button>
          <button class="action-btn confirm" @tap="handlePayment">立即支付</button>
        </view>
      </view>
    </view>
    
    <!-- 阈值设置弹窗 -->
    <view class="threshold-modal" v-if="showThresholdSettings">
      <view class="modal-mask" @tap="closeThresholdSettings"></view>
      <view class="modal-content threshold-content">
        <view class="modal-header">
          <text class="modal-title">电量阈值设置</text>
          <text class="modal-close" @tap="closeThresholdSettings">×</text>
        </view>
        
        <view class="modal-body threshold-body">
          <!-- 日用电阈值设置 -->
          <view class="threshold-section">
            <view class="section-header">
              <text class="section-title">日用电阈值</text>
              <view class="section-switch">
                <switch 
                  :checked="dailyThreshold.enabled" 
                  @change="toggleThreshold('daily', $event)" 
                  color="#1890ff"
                />
              </view>
            </view>
            
            <view class="threshold-controls" v-if="dailyThreshold.enabled">
              <view class="threshold-input-group">
                <text class="threshold-label">阈值</text>
                <view class="threshold-input">
                  <input 
                    type="number" 
                    v-model="dailyThreshold.value" 
                    placeholder="请输入阈值"
                    class="input-field"
                  />
                  <text class="input-unit">kWh</text>
                </view>
              </view>
              
              <view class="notification-options">
                <text class="options-label">报警方式</text>
                <view class="option-list">
                  <view 
                    class="option-item"
                    :class="{ 'option-selected': dailyThreshold.notifications.wechat }"
                    @tap="toggleNotification('daily', 'wechat')"
                  >
                    <text class="option-icon">💬</text>
                    <text class="option-text">微信推送</text>
                    <text class="option-check" v-if="dailyThreshold.notifications.wechat">✓</text>
                  </view>
                  <view 
                    class="option-item"
                    :class="{ 'option-selected': dailyThreshold.notifications.sms }"
                    @tap="toggleNotification('daily', 'sms')"
                  >
                    <text class="option-icon">📱</text>
                    <text class="option-text">短信推送</text>
                    <text class="option-check" v-if="dailyThreshold.notifications.sms">✓</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
          
          <!-- 月用电阈值设置 -->
          <view class="threshold-section">
            <view class="section-header">
              <text class="section-title">月用电阈值</text>
              <view class="section-switch">
                <switch 
                  :checked="monthlyThreshold.enabled" 
                  @change="toggleThreshold('monthly', $event)" 
                  color="#1890ff"
                />
              </view>
            </view>
            
            <view class="threshold-controls" v-if="monthlyThreshold.enabled">
              <view class="threshold-input-group">
                <text class="threshold-label">阈值</text>
                <view class="threshold-input">
                  <input 
                    type="number" 
                    v-model="monthlyThreshold.value" 
                    placeholder="请输入阈值"
                    class="input-field"
                  />
                  <text class="input-unit">kWh</text>
                </view>
              </view>
              
              <view class="notification-options">
                <text class="options-label">报警方式</text>
                <view class="option-list">
                  <view 
                    class="option-item"
                    :class="{ 'option-selected': monthlyThreshold.notifications.wechat }"
                    @tap="toggleNotification('monthly', 'wechat')"
                  >
                    <text class="option-icon">💬</text>
                    <text class="option-text">微信推送</text>
                    <text class="option-check" v-if="monthlyThreshold.notifications.wechat">✓</text>
                  </view>
                  <view 
                    class="option-item"
                    :class="{ 'option-selected': monthlyThreshold.notifications.sms }"
                    @tap="toggleNotification('monthly', 'sms')"
                  >
                    <text class="option-icon">📱</text>
                    <text class="option-text">短信推送</text>
                    <text class="option-check" v-if="monthlyThreshold.notifications.sms">✓</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        
        <view class="modal-actions">
          <button class="action-btn cancel" @tap="closeThresholdSettings">取消</button>
          <button class="action-btn confirm" @tap="saveThresholdSettings">保存设置</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 修改为当月用电数据
      currentMonthUsage: "156.78",
      currentMonthCost: "125.42",
      currentDate: "2023-11-05",
      
      currentPower: "2.34",
      powerPercentage: 45,
      todayUsage: "12.45",
      todayChange: 5.2,
      weekUsage: "86.72",
      weekChange: -3.1,
      monthUsage: "345.67",
      monthChange: 7.8,
      lastUpdateTime: "刚刚更新",
      selectedPeriod: "week",
      averageUsage: "13.5",
      peakUsage: "16.8",
      totalUsage: "94.3",
      averagePower: "1.28",
      
      // 账户状态相关数据
      accountStatus: "normal", // normal, warning, expired
      showAccountStatus: true,
      accountDismissed: false,
      userInfo: {
        name: "张先生",
        expireDate: "2023-12-05",
        remainingDays: 15,
        currentPlan: "基础套餐"
      },
      
      // 续费相关数据
      showRenewalModal: false,
      renewalPlans: [
        { months: 1, price: "50.00", savings: 0 },
        { months: 3, price: "135.00", savings: 10 },
        { months: 6, price: "240.00", savings: 20 },
        { months: 12, price: "420.00", savings: 30 }
      ],
      selectedPlan: 1,
      
      // 阈值设置相关数据 - 修复命名冲突
      showThresholdSettings: false,
      dailyThreshold: {
        enabled: true,
        value: "15",
        notifications: {
          wechat: true,
          sms: false
        }
      },
      monthlyThreshold: {
        enabled: true,
        value: "300",
        notifications: {
          wechat: true,
          sms: true
        }
      },
      
      // 报警相关数据
      activeAlerts: [],
      
      // uCharts 数据
      chartData: {},
      chartOpts: {
        color: ["#1890FF", "#52C41A", "#FAAD14"],
        padding: [15, 15, 0, 15],
        enableScroll: false,
        legend: {
          show: false
        },
        xAxis: {
          disableGrid: true,
          axisLine: false,
          fontColor: "#666666",
          fontSize: 12
        },
        yAxis: {
          gridType: "dash",
          dashLength: 2,
          gridColor: "#CCCCCC",
          data: [
            {
              min: 0,
              max: 20
            }
          ],
          format: (val) => {
            return val.toFixed(0) + "kWh"
          }
        },
        extra: {
          line: {
            type: "curve",
            width: 2,
            activeType: "hollow",
            linearType: "custom",
            onShadow: true,
            animation: "horizontal"
          }
        }
      }
    }
  },
  computed: {
    // 账户状态相关计算属性
    accountStatusClass() {
      return `status-${this.accountStatus}`;
    },
    
    accountStatusIcon() {
      switch(this.accountStatus) {
        case 'normal': return '✅';
        case 'warning': return '⚠️';
        case 'expired': return '❌';
        default: return 'ℹ️';
      }
    },
    
    accountStatusText() {
      var day=30;
      switch(this.accountStatus) {
        case 'normal': 
          return `账户正常，剩余${day}天`;
        case 'warning': 
          return `账户即将到期，剩余${day}天`;
        case 'expired': 
          return '账户已到期，请立即续费';
        default: 
          return '账户状态未知';
      }
    },
    
    accountStatusAction() {
      switch(this.accountStatus) {
        case 'normal': return '查看详情';
        case 'warning': return '立即续费';
        case 'expired': return '立即续费';
        default: return '查看详情';
      }
    },
    
    // 选择的套餐信息
    selectedPlanMonths() {
      const plan = this.renewalPlans.find(p => p.months === this.selectedPlan);
      return plan ? plan.months : 1;
    },
    
    selectedPlanPrice() {
      const plan = this.renewalPlans.find(p => p.months === this.selectedPlan);
      return plan ? plan.price : "50.00";
    },
    
    // 报警相关计算属性
    hasThresholdAlerts() {
      return this.activeAlerts.length > 0;
    },
    
    activeAlertsCount() {
      return this.activeAlerts.length;
    },
    
    // 整体阈值状态
    overallThresholdStatus() {
      const dailyStatus = this.getThresholdStatus('daily');
      const monthlyStatus = this.getThresholdStatus('monthly');
      
      // 如果有任一阈值处于危险状态
      if (dailyStatus === 'danger' || monthlyStatus === 'danger') return 'danger';
      // 如果有任一阈值处于警告状态
      if (dailyStatus === 'warning' || monthlyStatus === 'warning') return 'warning';
      // 如果有任一阈值处于注意状态
      if (dailyStatus === 'caution' || monthlyStatus === 'caution') return 'caution';
      // 否则为安全状态
      return 'safe';
    },
    
    overallThresholdText() {
      switch(this.overallThresholdStatus) {
        case 'danger': return '严重超限';
        case 'warning': return '已超限';
        case 'caution': return '接近阈值';
        case 'safe': return '正常';
        default: return '正常';
      }
    }
  },
  methods: {
    refreshData() {
      uni.showLoading({
        title: '刷新中...'
      });
      
      // 模拟数据刷新
      setTimeout(() => {
        // 模拟从服务器获取新数据
        this.currentMonthUsage = (156.78 + Math.random() * 10).toFixed(2);
        this.currentMonthCost = (parseFloat(this.currentMonthUsage) * 0.8).toFixed(2);
        this.currentPower = (2 + Math.random() * 2).toFixed(2);
        this.powerPercentage = Math.floor(Math.random() * 100);
        this.todayUsage = (12 + Math.random() * 5).toFixed(2);
        this.todayChange = (Math.random() * 10 - 5).toFixed(1);
        this.weekUsage = (85 + Math.random() * 10).toFixed(2);
        this.weekChange = (Math.random() * 10 - 5).toFixed(1);
        this.monthUsage = (340 + Math.random() * 15).toFixed(2);
        this.monthChange = (Math.random() * 10 - 5).toFixed(1);
        this.averagePower = (parseFloat(this.currentPower) / this.powerPercentage * 100).toFixed(2);
        
        // 检查阈值报警
        this.checkThresholdAlerts();
        
        // 更新趋势数据
        this.updateChartData(this.selectedPeriod);
        
        // 更新最后刷新时间
        const now = new Date();
        this.lastUpdateTime = `${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')} 更新`;
        
        uni.hideLoading();
        uni.showToast({
          title: '数据已更新',
          icon: 'success',
          duration: 1500
        });
      }, 1500);
    },
    
    // 阈值设置相关方法 - 修复命名冲突
    openThresholdSettings() {
      this.showThresholdSettings = true;
    },
    
    closeThresholdSettings() {
      this.showThresholdSettings = false;
    },
    
    toggleThreshold(type, e) {
      if (type === 'daily') {
        this.dailyThreshold.enabled = e.detail.value;
      } else if (type === 'monthly') {
        this.monthlyThreshold.enabled = e.detail.value;
      }
    },
    
    toggleNotification(type, notificationType) {
      if (type === 'daily') {
        this.dailyThreshold.notifications[notificationType] = !this.dailyThreshold.notifications[notificationType];
      } else if (type === 'monthly') {
        this.monthlyThreshold.notifications[notificationType] = !this.monthlyThreshold.notifications[notificationType];
      }
    },
    
    saveThresholdSettings() {
      // 保存阈值设置到本地存储
      uni.setStorageSync('thresholdSettings', {
        daily: this.dailyThreshold,
        monthly: this.monthlyThreshold
      });
      
      // 检查阈值报警
      this.checkThresholdAlerts();
      
      this.closeThresholdSettings();
      
      uni.showToast({
        title: '设置已保存',
        icon: 'success',
        duration: 2000
      });
    },
    
    checkThresholdAlerts() {
      this.activeAlerts = [];
      
      // 检查日用电阈值
      if (this.dailyThreshold.enabled && parseFloat(this.todayUsage) > parseFloat(this.dailyThreshold.value)) {
        const usagePercent = Math.round((parseFloat(this.todayUsage) / parseFloat(this.dailyThreshold.value)) * 100);
        this.activeAlerts.push({
          type: 'daily',
          level: usagePercent > 120 ? 'high' : 'medium',
          icon: usagePercent > 120 ? '🔴' : '🟡',
          title: '日用电量超限',
          description: `今日用电 ${this.todayUsage}kWh，超过阈值 ${this.dailyThreshold.value}kWh (${usagePercent}%)`
        });
      }
      
      // 检查月用电阈值
      if (this.monthlyThreshold.enabled && parseFloat(this.currentMonthUsage) > parseFloat(this.monthlyThreshold.value)) {
        const usagePercent = Math.round((parseFloat(this.currentMonthUsage) / parseFloat(this.monthlyThreshold.value)) * 100);
        this.activeAlerts.push({
          type: 'monthly',
          level: usagePercent > 120 ? 'high' : 'medium',
          icon: usagePercent > 120 ? '🔴' : '🟡',
          title: '月用电量超限',
          description: `本月用电 ${this.currentMonthUsage}kWh，超过阈值 ${this.monthlyThreshold.value}kWh (${usagePercent}%)`
        });
      }
      
      // 模拟推送报警
      this.simulateNotifications();
    },
    
    simulateNotifications() {
      // 在实际应用中，这里会调用后端API发送推送
      if (this.activeAlerts.length > 0) {
        console.log('发送阈值报警通知:', this.activeAlerts);
        
        // 检查微信推送
        if (this.dailyThreshold.notifications.wechat || this.monthlyThreshold.notifications.wechat) {
          console.log('发送微信推送');
        }
        
        // 检查短信推送
        if (this.dailyThreshold.notifications.sms || this.monthlyThreshold.notifications.sms) {
          console.log('发送短信推送');
        }
      }
    },
    
    getAlertClass(level) {
      return `alert-${level}`;
    },
    
    handleAlertAction(alert) {
      this.openThresholdSettings();
    },
    
    // 阈值状态相关方法
    getThresholdProgress(type) {
      if (type === 'daily') {
        if (!this.dailyThreshold.enabled) return 0;
        const usage = parseFloat(this.todayUsage);
        const threshold = parseFloat(this.dailyThreshold.value);
        return Math.min(100, Math.round((usage / threshold) * 100));
      } else if (type === 'monthly') {
        if (!this.monthlyThreshold.enabled) return 0;
        const usage = parseFloat(this.currentMonthUsage);
        const threshold = parseFloat(this.monthlyThreshold.value);
        return Math.min(100, Math.round((usage / threshold) * 100));
      }
      return 0;
    },
    
    getThresholdProgressClass(type) {
      const progress = this.getThresholdProgress(type);
      if (progress > 100) return 'progress-danger';
      if (progress > 80) return 'progress-warning';
      if (progress > 60) return 'progress-caution';
      return 'progress-safe';
    },
    
    getThresholdStatus(type) {
      if (type === 'daily') {
        const usage = parseFloat(this.todayUsage);
        const threshold = parseFloat(this.dailyThreshold.value);
        if (usage > threshold * 1.2) return 'danger';
        if (usage > threshold) return 'warning';
        if (usage > threshold * 0.8) return 'caution';
        return 'safe';
      } else if (type === 'monthly') {
        const usage = parseFloat(this.currentMonthUsage);
        const threshold = parseFloat(this.monthlyThreshold.value);
        if (usage > threshold * 1.2) return 'danger';
        if (usage > threshold) return 'warning';
        if (usage > threshold * 0.8) return 'caution';
        return 'safe';
      }
      return 'safe';
    },
    
    getThresholdStatusClass(type) {
      const status = this.getThresholdStatus(type);
      return `status-${status}`;
    },
    
    getThresholdStatusText(type) {
      const status = this.getThresholdStatus(type);
      switch(status) {
        case 'danger': return '严重超限';
        case 'warning': return '已超限';
        case 'caution': return '接近阈值';
        case 'safe': return '正常';
        default: return '正常';
      }
    },
    
    selectPeriod(period) {
      this.selectedPeriod = period;
      this.updateChartData(period);
    },
    
    updateChartData(period) {
      let categories = [];
      let seriesData = [];
      
      if (period === 'day') {
        // 24小时数据
        categories = Array.from({ length: 24 }, (_, i) => `${i}:00`);
        seriesData = Array.from({ length: 24 }, () => 
          parseFloat((5 + Math.random() * 10).toFixed(1))
        );
      } else if (period === 'week') {
        // 7天数据
        categories = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
        seriesData = [
          10.2, 12.5, 11.8, 13.2, 14.5, 16.8, 15.3
        ];
      } else if (period === 'month') {
        // 30天数据（简化显示为4周）
        categories = ['第1周', '第2周', '第3周', '第4周'];
        seriesData = Array.from({ length: 4 }, () => 
          parseFloat((40 + Math.random() * 30).toFixed(1))
        );
      }
      
      // 更新统计信息
      this.averageUsage = (seriesData.reduce((sum, item) => sum + item, 0) / seriesData.length).toFixed(1);
      this.peakUsage = Math.max(...seriesData).toFixed(1);
      this.totalUsage = seriesData.reduce((sum, item) => sum + item, 0).toFixed(1);
      
      // 更新 uCharts 数据
      this.chartData = {
        categories: categories,
        series: [
          {
            name: "用电量",
            linearColor: [
              [
                0,
                "#1890FF"
              ],
              [
                0.25,
                "#00B5FF"
              ],
              [
                0.5,
                "#00D1ED"
              ],
              [
                0.75,
                "#00E6BB"
              ],
              [
                1,
                "#90F489"
              ]
            ],
            setShadow: [
              3,
              8,
              10,
              "#1890FF"
            ],
            data: seriesData,
            
          }
        ]
      };
      
      // 动态调整Y轴最大值
      this.chartOpts.yAxis.data[0].max = Math.ceil(Math.max(...seriesData) * 1.2);
    },
    
    // 初始化图表数据
    initChartData() {
      this.updateChartData(this.selectedPeriod);
    },
    
    // 账户状态相关方法
    handleAccountStatusClick() {
      switch(this.accountStatus) {
        case 'normal':
          // 跳转到个人中心
          uni.switchTab({
            url: '/pages/profile/profile'
          });
          break;
        case 'warning':
        case 'expired':
          // 显示续费弹窗
          this.showRenewalModal = true;
          break;
      }
    },
    
    dismissAccountStatus() {
      this.showAccountStatus = false;
      this.accountDismissed = true;
      // 可以存储到本地，避免每次打开都显示
      uni.setStorageSync('accountStatusDismissed', true);
    },
    
    // 检查账户状态
    checkAccountStatus() {
      // 从本地存储获取用户信息
      const userInfo = uni.getStorageSync('userInfo') || this.userInfo;
      
      // 计算剩余天数
      const currentDate = new Date();
      const expireDate = new Date(userInfo.expireDate);
      const remainingDays = Math.ceil((expireDate - currentDate) / (1000 * 60 * 60 * 24));
      
      // 更新用户信息
      this.userInfo = { ...this.userInfo, ...userInfo, remainingDays };
      
      // 确定账户状态
      if (remainingDays <= 0) {
        this.accountStatus = 'expired';
      } else if (remainingDays <= 7) {
        this.accountStatus = 'warning';
      } else {
        this.accountStatus = 'normal';
      }
      
      // 检查是否已手动关闭状态提示
      const dismissed = uni.getStorageSync('accountStatusDismissed');
      if (dismissed && this.accountStatus !== 'expired') {
        this.showAccountStatus = false;
      } else {
        this.showAccountStatus = true;
      }
    },
    
    // 续费相关方法
    showRenewalOptions() {
      this.showRenewalModal = true;
    },
    
    closeRenewalModal() {
      this.showRenewalModal = false;
    },
    
    selectPlan(months) {
      this.selectedPlan = months;
    },
    
    handlePayment() {
      uni.showLoading({
        title: '支付中...'
      });
      
      // 模拟支付过程
      setTimeout(() => {
        uni.hideLoading();
        
        // 更新用户到期时间
        const currentDate = new Date();
        const newExpireDate = new Date(currentDate);
        newExpireDate.setMonth(currentDate.getMonth() + this.selectedPlanMonths);
        
        // 更新本地用户信息
        const updatedUserInfo = {
          ...this.userInfo,
          expireDate: this.formatDate(newExpireDate),
          remainingDays: Math.ceil((newExpireDate - currentDate) / (1000 * 60 * 60 * 24))
        };
        
        this.userInfo = updatedUserInfo;
        uni.setStorageSync('userInfo', updatedUserInfo);
        
        // 重新检查账户状态
        this.checkAccountStatus();
        
        // 关闭弹窗
        this.closeRenewalModal();
        
        uni.showToast({
          title: '续费成功',
          icon: 'success',
          duration: 2000
        });
      }, 2000);
    },
    
    // 导出图表数据
    exportChartData() {
      uni.showActionSheet({
        itemList: ['导出为图片', '导出为CSV'],
        success: (res) => {
          if (res.tapIndex === 0) {
            uni.showToast({
              title: '图片导出功能开发中',
              icon: 'none'
            });
          } else if (res.tapIndex === 1) {
            uni.showToast({
              title: 'CSV导出功能开发中',
              icon: 'none'
            });
          }
        }
      });
    },
    
    // 日期格式化辅助方法
    formatDate(date) {
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    
    // 初始化阈值设置
    initThresholdSettings() {
      const savedSettings = uni.getStorageSync('thresholdSettings');
      if (savedSettings) {
        this.dailyThreshold = savedSettings.daily || this.dailyThreshold;
        this.monthlyThreshold = savedSettings.monthly || this.monthlyThreshold;
      }
      
      // 检查阈值报警
      this.checkThresholdAlerts();
    }
  },
  
  onLoad() {
    // 初始化最后刷新时间
    const now = new Date();
    this.lastUpdateTime = `${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')} 更新`;
    
    // 初始化当前日期
    this.currentDate = this.formatDate(now);
    
    // 初始化图表数据
    this.initChartData();
    
    // 检查账户状态
    this.checkAccountStatus();
    
    // 初始化阈值设置
    this.initThresholdSettings();
  },
  
  onShow() {
    // 页面显示时重新检查账户状态
    this.checkAccountStatus();
    
    // 重新检查阈值报警
    this.checkThresholdAlerts();
  },
  
  onPullDownRefresh() {
    // 下拉刷新
    this.refreshData();
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 1500);
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4efe9 100%);
}

.status-bar {
  height: var(--status-bar-height);
  background: transparent;
}

.page-content {
  flex: 1;
  padding: 30rpx 30rpx 140rpx;
}

/* 头部样式 */
.header-section {
  margin-bottom: 20rpx;
}

.header-content {
  display: flex;
  flex-direction: column;
  position: relative;
}

.welcome-text {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.title {
  display: block;
  font-size: 46rpx;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 20rpx;
}

.header-actions {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
}

.refresh-area {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.8);
  padding: 12rpx 20rpx;
  border-radius: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.refresh-text {
  font-size: 24rpx;
  color: #1890ff;
  margin-right: 10rpx;
}

.refresh-icon {
  font-size: 28rpx;
}

/* 阈值设置按钮样式 */
.threshold-button-area {
  margin-bottom: 30rpx;
}

.threshold-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
  padding: 24rpx 30rpx;
  border-radius: 16rpx;
  box-shadow: 0 6rpx 20rpx rgba(24, 144, 255, 0.3);
  transition: all 0.3s ease;
}

.threshold-button:active {
  transform: scale(0.98);
  box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.2);
}

.threshold-icon {
  font-size: 36rpx;
  margin-right: 16rpx;
}

.threshold-text {
  flex: 1;
  font-size: 32rpx;
  color: white;
  font-weight: 600;
}

.threshold-arrow {
  font-size: 40rpx;
  color: white;
  font-weight: bold;
}

/* 账户状态提示条样式 */
.account-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 24rpx;
  border-radius: 16rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.status-normal {
  background: linear-gradient(135deg, #f6ffed 0%, #d9f7be 100%);
  border: 1rpx solid #b7eb8f;
}

.status-warning {
  background: linear-gradient(135deg, #fffbe6 0%, #ffe58f 100%);
  border: 1rpx solid #ffe58f;
  animation: pulse 2s infinite;
}

.status-expired {
  background: linear-gradient(135deg, #fff2f0 0%, #ffccc7 100%);
  border: 1rpx solid #ffa39e;
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.8; }
  100% { opacity: 1; }
}

.status-content {
  display: flex;
  align-items: center;
  flex: 1;
}

.status-icon {
  font-size: 36rpx;
  margin-right: 16rpx;
}

.status-text {
  font-size: 28rpx;
  font-weight: 500;
  flex: 1;
}

.status-action {
  font-size: 26rpx;
  color: #1890ff;
  font-weight: 500;
  margin-left: 16rpx;
}

.status-close {
  font-size: 36rpx;
  color: #999;
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 16rpx;
}

/* 数据卡片容器 */
.data-cards {
  display: flex;
  gap: 20rpx;
  margin-bottom: 30rpx;
}

.data-card {
  flex: 1;
  background: white;
  border-radius: 24rpx;
  box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.05);
  padding: 30rpx;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.data-card:active {
  transform: scale(0.98);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.card-title {
  font-size: 28rpx;
  color: #333;
  font-weight: 600;
}

.card-icon {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e6f7ff;
  color: #1890ff;
  font-size: 28rpx;
}

/* 当月用电卡片样式 */
.meter-card .card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20rpx 0;
}

.usage-section {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-bottom: 20rpx;
}

.usage-value {
  font-size: 48rpx;
  font-weight: 700;
  color: #1890ff;
}

.usage-unit {
  font-size: 28rpx;
  color: #999;
  margin-left: 10rpx;
}

.cost-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cost-value {
  font-size: 36rpx;
  font-weight: 700;
  color: #ff4d4f;
}

.cost-label {
  font-size: 22rpx;
  color: #999;
  margin-top: 5rpx;
}

.card-footer {
  text-align: center;
  margin-top: 10rpx;
}

.update-time {
  font-size: 22rpx;
  color: #999;
}

/* 功率卡片样式 */
.power-card .card-content {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin: 30rpx 0 20rpx;
}

.power-value {
  font-size: 48rpx;
  font-weight: 700;
  color: #52c41a;
}

.power-unit {
  font-size: 28rpx;
  color: #999;
  margin-left: 10rpx;
}

.power-indicator {
  margin-top: 20rpx;
}

.indicator-bar {
  height: 12rpx;
  background: #f0f0f0;
  border-radius: 6rpx;
  overflow: hidden;
  margin-bottom: 10rpx;
}

.indicator-fill {
  height: 100%;
  background: linear-gradient(90deg, #52c41a, #1890ff);
  border-radius: 6rpx;
  transition: width 0.5s ease;
}

.indicator-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.indicator-text {
  font-size: 22rpx;
  color: #666;
}

.indicator-max {
  font-size: 20rpx;
  color: #999;
}

/* 阈值提醒卡片样式 */
.threshold-card {
  background: white;
  border-radius: 24rpx;
  box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.05);
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.alert-badge {
  background: #ff4d4f;
  border-radius: 20rpx;
  padding: 4rpx 12rpx;
  min-width: 36rpx;
  height: 36rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge-text {
  font-size: 22rpx;
  color: white;
  font-weight: 600;
}

.threshold-alerts {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.alert-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-radius: 16rpx;
  border-left: 6rpx solid #ccc;
}

.alert-high {
  border-left-color: #ff4d4f;
  background: #fff2f0;
}

.alert-medium {
  border-left-color: #faad14;
  background: #fffbe6;
}

.alert-icon {
  font-size: 36rpx;
  margin-right: 20rpx;
}

.alert-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.alert-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 8rpx;
}

.alert-desc {
  font-size: 24rpx;
  color: #666;
}

.alert-actions {
  margin-left: 20rpx;
}

.alert-action {
  font-size: 24rpx;
  color: #1890ff;
  font-weight: 500;
  padding: 8rpx 16rpx;
  background: rgba(24, 144, 255, 0.1);
  border-radius: 16rpx;
}

/* 统计卡片样式 */
.stats-card {
  background: white;
  border-radius: 24rpx;
  box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.05);
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.stats-card .card-header {
  margin-bottom: 30rpx;
}

.time-filter {
  display: flex;
  background: #f5f5f5;
  border-radius: 20rpx;
  padding: 4rpx;
}

.filter-option {
  padding: 12rpx 24rpx;
  font-size: 24rpx;
  color: #666;
  border-radius: 16rpx;
  transition: all 0.3s ease;
}

.filter-option.active {
  background: white;
  color: #1890ff;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.stats-content {
  display: flex;
  justify-content: space-between;
}

.stat-item {
  flex: 1;
  text-align: center;
  padding: 0 15rpx;
}

.stat-label {
  display: block;
  font-size: 24rpx;
  color: #999;
  margin-bottom: 15rpx;
}

.stat-value {
  display: block;
  font-size: 32rpx;
  font-weight: 600;
  color: #1890ff;
  margin-bottom: 5rpx;
}

.stat-unit {
  display: block;
  font-size: 20rpx;
  color: #999;
  margin-bottom: 10rpx;
}

.stat-change {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20rpx;
}

.positive {
  color: #f5222d;
}

.negative {
  color: #52c41a;
}

.change-icon {
  margin-right: 5rpx;
}

/* 图表卡片样式 */
.chart-card {
  background: white;
  border-radius: 24rpx;
  box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.05);
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.chart-actions {
  display: flex;
}

.chart-action {
  font-size: 24rpx;
  color: #1890ff;
  padding: 8rpx 16rpx;
  background: rgba(24, 144, 255, 0.1);
  border-radius: 16rpx;
}

.chart-container {
  width: 100%;
  height: 400rpx;
  margin: 20rpx 0;
}

.chart-summary {
  display: flex;
  justify-content: space-around;
  padding-top: 30rpx;
  border-top: 1rpx solid #f0f0f0;
}

.summary-item {
  text-align: center;
  flex: 1;
}

.summary-label {
  display: block;
  font-size: 22rpx;
  color: #999;
  margin-bottom: 8rpx;
}

.summary-value {
  display: block;
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
}

/* 阈值设置弹窗样式 */
.threshold-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.threshold-content {
  width: 700rpx;
  max-height: 90vh;
  overflow-y: auto;
}

.threshold-body {
  padding-bottom: 0;
}

.threshold-section {
  margin-bottom: 40rpx;
  padding-bottom: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.threshold-section:last-child {
  border-bottom: none;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.section-switch {
  transform: scale(0.8);
}

.threshold-controls {
  padding-left: 20rpx;
}

.threshold-input-group {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.threshold-label {
  font-size: 28rpx;
  color: #666;
  width: 120rpx;
}

.threshold-input {
  flex: 1;
  display: flex;
  align-items: center;
  background: #f8f9fa;
  border-radius: 12rpx;
  padding: 0 20rpx;
  height: 80rpx;
}

.input-field {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  height: 100%;
}

.input-unit {
  font-size: 24rpx;
  color: #999;
  margin-left: 10rpx;
}

.notification-options {
  margin-top: 20rpx;
}

.options-label {
  display: block;
  font-size: 28rpx;
  color: #666;
  margin-bottom: 20rpx;
}

.option-list {
  display: flex;
  gap: 20rpx;
}

.option-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx;
  border: 2rpx solid #e8e8e8;
  border-radius: 16rpx;
  transition: all 0.3s;
}

.option-selected {
  border-color: #1890ff;
  background: #f0f8ff;
}

.option-icon {
  font-size: 32rpx;
  margin-right: 10rpx;
}

.option-text {
  font-size: 26rpx;
  color: #333;
}

.option-check {
  font-size: 24rpx;
  color: #1890ff;
  margin-left: 10rpx;
  font-weight: bold;
}

.threshold-preview {
  background: #f8f9fa;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-top: 20rpx;
}

.preview-title {
  display: block;
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 20rpx;
}

.preview-items {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.preview-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
  background: white;
  border-radius: 12rpx;
}

.preview-label {
  font-size: 26rpx;
  color: #666;
}

.preview-value {
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
}

.preview-status {
  font-size: 24rpx;
  padding: 6rpx 12rpx;
  border-radius: 8rpx;
}

.status-safe {
  background: #f6ffed;
  color: #52c41a;
}

.status-caution {
  background: #fffbe6;
  color: #faad14;
}

.status-warning {
  background: #fff2e8;
  color: #fa541c;
}

.status-danger {
  background: #fff2f0;
  color: #ff4d4f;
}

.preview-empty {
  text-align: center;
  padding: 40rpx 20rpx;
}

.empty-text {
  font-size: 26rpx;
  color: #999;
}

/* 续费弹窗样式 */
.renewal-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.modal-content {
  position: relative;
  background: white;
  border-radius: 24rpx;
  width: 600rpx;
  max-width: 90vw;
  padding: 40rpx;
  box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.2);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.modal-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
}

.modal-close {
  font-size: 48rpx;
  color: #999;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-body {
  margin-bottom: 40rpx;
}

.modal-desc {
  display: block;
  font-size: 28rpx;
  color: #666;
  text-align: center;
  margin-bottom: 40rpx;
}

.plan-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20rpx;
  margin-bottom: 40rpx;
}

.plan-option {
  border: 2rpx solid #e8e8e8;
  border-radius: 16rpx;
  padding: 30rpx 20rpx;
  text-align: center;
  transition: all 0.3s;
}

.plan-option-selected {
  border-color: #1890ff;
  background: #f0f8ff;
  box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.1);
}

.plan-duration {
  margin-bottom: 16rpx;
}

.plan-months {
  font-size: 40rpx;
  font-weight: 700;
  color: #333;
}

.plan-unit {
  font-size: 24rpx;
  color: #666;
  margin-left: 8rpx;
}

.plan-price {
  margin-bottom: 12rpx;
}

.price-symbol {
  font-size: 24rpx;
  color: #ff4d4f;
}

.price-amount {
  font-size: 32rpx;
  font-weight: 600;
  color: #ff4d4f;
}

.plan-savings {
  background: #fff2e8;
  border-radius: 12rpx;
  padding: 4rpx 12rpx;
}

.savings-text {
  font-size: 20rpx;
  color: #fa541c;
}

.payment-summary {
  background: #f8f9fa;
  border-radius: 16rpx;
  padding: 30rpx;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.summary-item:last-child {
  margin-bottom: 0;
}

.summary-label {
  font-size: 28rpx;
  color: #666;
}

.summary-value {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.summary-value.price {
  color: #ff4d4f;
  font-size: 32rpx;
  font-weight: 600;
}

.modal-actions {
  display: flex;
  gap: 20rpx;
}

.action-btn {
  flex: 1;
  height: 88rpx;
  border-radius: 16rpx;
  font-size: 32rpx;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}

.action-btn.cancel {
  background: #f5f5f5;
  color: #666;
  border: 1rpx solid #e8e8e8;
}

.action-btn.confirm {
  background: #1890ff;
  color: white;
}

/* 阈值状态卡片样式 */
.threshold-status-card {
  background: white;
  border-radius: 24rpx;
  box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.05);
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.threshold-status-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25rpx;
}

.status-indicator {
  display: flex;
  align-items: center;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  font-weight: 500;
}

.status-indicator.safe {
  background: #f6ffed;
  color: #52c41a;
}

.status-indicator.caution {
  background: #fffbe6;
  color: #faad14;
}

.status-indicator.warning {
  background: #fff2e8;
  color: #fa541c;
}

.status-indicator.danger {
  background: #fff2f0;
  color: #ff4d4f;
}

.status-dot {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  margin-right: 8rpx;
}

.status-indicator.safe .status-dot {
  background: #52c41a;
}

.status-indicator.caution .status-dot {
  background: #faad14;
}

.status-indicator.warning .status-dot {
  background: #fa541c;
}

.status-indicator.danger .status-dot {
  background: #ff4d4f;
}

.threshold-status-content {
  display: flex;
  flex-direction: column;
  gap: 25rpx;
}

.status-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
}

.status-info {
  flex: 1;
}

.status-label {
  display: block;
  font-size: 26rpx;
  color: #666;
  margin-bottom: 8rpx;
}

.status-value {
  display: block;
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.status-progress {
  display: flex;
  align-items: center;
  flex: 1;
  margin: 0 30rpx;
}

.progress-bar {
  flex: 1;
  height: 12rpx;
  background: #f0f0f0;
  border-radius: 6rpx;
  overflow: hidden;
  margin-right: 15rpx;
}

.progress-fill {
  height: 100%;
  border-radius: 6rpx;
  transition: width 0.5s ease;
}

.progress-safe {
  background: linear-gradient(90deg, #52c41a, #73d13d);
}

.progress-caution {
  background: linear-gradient(90deg, #faad14, #ffc53d);
}

.progress-warning {
  background: linear-gradient(90deg, #fa541c, #ff7a45);
}

.progress-danger {
  background: linear-gradient(90deg, #ff4d4f, #ff7875);
}

.progress-text {
  font-size: 22rpx;
  color: #999;
  min-width: 60rpx;
  text-align: right;
}

.status-tag {
  padding: 8rpx 16rpx;
  border-radius: 12rpx;
  font-size: 22rpx;
  font-weight: 500;
  min-width: 100rpx;
  text-align: center;
}

.status-safe {
  background: #f6ffed;
  color: #52c41a;
}

.status-caution {
  background: #fffbe6;
  color: #faad14;
}

.status-warning {
  background: #fff2e8;
  color: #fa541c;
}

.status-danger {
  background: #fff2f0;
  color: #ff4d4f;
}

.no-thresholds {
  text-align: center;
  padding: 40rpx 20rpx;
}

.no-thresholds-text {
  display: block;
  font-size: 28rpx;
  color: #999;
  margin-bottom: 10rpx;
}

.no-thresholds-hint {
  display: block;
  font-size: 24rpx;
  color: #ccc;
}
</style>